<template>
    <div class="index-card">
        <div class="title flex-x-between">
            <div class="title-left">{{cardInfo.warnTypeName}}</div>
            <div class="title-right" >{{cardInfo.warnTime | monthFormat}}</div>
        </div>
        <div class="content">
            <div>{{cardInfo.warnContent}}</div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
    export default {
    props: {
        cardInfo: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data () {
        return {

        }
    },
    mounted () {
        this.init()
    },
    filters: {
        monthFormat (val) {
            return moment(val).format('YYYY-MM-DD')
        }
    },
    methods: {
        /* 初始化 */
        init () {

        }
    }
}
</script>

<style lang="less" scoped>
.title-left {
    height: 33px;
    line-height: 33px;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: #2D3748;
}
.title-right {
    height: 33px;
    line-height: 33px;
    padding: 0;
    font-size: 15px;
    color: #2D3748;
}
.content {
    font-size: 13px;
    margin: 20px 0 10px;
}
</style>
